<template>
  <el-container class="container">
    <section class="headerBox">
      <div class="headerBoxNav">
        <el-row>
          <el-col :xs=4 :sm=1>首页</el-col>
          <el-col :xs=4 :sm=1>分类</el-col>
          <el-col :xs=4 :sm=1>留言</el-col>
          <el-col :xs=4 :sm=1>关于</el-col>
        </el-row>
      </div>
    </section>
    <arctive-list></arctive-list>
    <footer-box></footer-box>
  </el-container>
</template>

<script>
import arctiveList from '@/views/arctiveList'
import footerBox from '@/views/footer'
export default {
  name: 'HelloWorld',
  data () {
    return {
      headerImg: require('@/assets/images/index/headerBg.jpg')
    }
  },
  components: {
    arctiveList,
    footerBox
  },
  created () {
    console.log(this.headerImg)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import '~@/assets/stylus/color'

.container{
  display: flex;
  flex-direction: column;
  .headerBox{
    width: 100%;
    height: 240px;
    background-color: #e4e7ed;
    text-align: center;
    line-height: 60px;
    background: url('~@/assets/images/index/headerBg.jpg')center no-repeat;
    background-size: cover;
    .headerBoxNav{
      line-height 40px
      color $header
      background-color rgba(0,0,0,.6)
      position fixed
      top 0
      left 0
      width 100%
      z-index 9
    }
  }
}

</style>
<style>

</style>
